<template>
    <view class="openBox">
        <u--image class="haveListImg" src="/static/img/car_havelist.png" width="100rpx" height="100rpx" mode="aspectFill" @tap="$emit('update:showList', !showList)"/>
        <view class="priceBox" @tap="$emit('update:showList', !showList)">
            <text class="yg">预计到手价</text>
            <text class="unit">¥</text>
            <text class="price">{{payPrice}}</text>
        </view>
        <view class="toCheckout">
            去结算
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            showList: Boolean,
            buyCarList: Array
        },
        computed: {
            payPrice() {
                let price = 0
                this.buyCarList.forEach(i => {
                    if (i.checked && i.cartNum) {
                        price += i.cartNum * i.truePrice
                    }
                });
                return price
            }
        }
    };
</script>

<style lang="scss" scoped>
    .openBox {
        background-color: $uni-bg-color;
        box-shadow: $uni-box-shadow-2;
        border-radius: 100rpx;
        overflow: hidden;
        padding-left: 13rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .priceBox {
            margin-left: 20rpx;
            flex: 1;
            .yg {
                font-size: 30rpx;
                color: $uni-text-color-grey-3;
            }
            .unit {
                margin-left: 8rpx;
                font-family: DIN Alternate, DIN Alternate;
                font-weight: bold;
                font-size: 24rpx;
                color: $uni-text-color-money;
            }
            .price {
                font-family: DIN Alternate, DIN Alternate;
                font-weight: bold;
                font-size: 36rpx;
                color: $uni-text-color-money;
            }
        }
        .toCheckout {
            width: 210rpx;
            height: 128rpx;
            background: $uni-bg-color-btn;
            text-align: center;
            line-height: 128rpx;
            font-size: 34rpx;
            color: $uni-text-color-inverse;
        }
    }
</style>